<#include "../layout/layout.ftl">
<#macro overrideHead>
    <title>用户列表</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="/css/bootstrap-table.css">
<link rel="stylesheet" href="/css/bootstrap-select.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="/js/bootstrap-table.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="/js/bootstrap-table-zh-CN.js"></script>
<script src="/js/bootstrap-select.js"></script>
</#macro>
<#macro overrideContainer>
<div id="page-wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <ol class="breadcrumb">
                    <li class="active">
                        用户列表
                    </li>
                </ol>
                <hr>
            </div>
        </div>


            <div id="toolbar" class="btn-group pull-right" style="margin-right: 20px;">
                <div class="form-inline" style="margin-left: 5px;margin-bottom: 10px;">
                    <div class="form-group">
                        <label for="queryAccount">用户名：</label>
                        <input id="queryAccount" class="form-control input-sm">
                    </div>
                    <div class="form-group">
                        <label for="queryName">昵称：</label>
                        <input id="queryName" class="form-control input-sm">
                    </div>
                    <div class="form-group">
                        <label for="queryStatus" >状态：</label>
                        <select class="selectpicker" id="queryStatus">
                            <option value="-1">全部</option>
                            <option value="0">冻结</option>
                            <option value="1">正常</option>
                        </select>
                    </div>
                    <button class="btn btn-primary btn-sm" id="queryBtn" style="margin-left: 20px">查询</button>
                    <button id="btn_edit" type="button" class="btn btn-default" style=" border-radius: 0" onclick="modifyPer(null,null)">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                    </button>
                    <button id="btn_delete" type="button" class="btn btn-default" onclick="deleteBlog(null)">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                    </button>
                </div>

            </div>


        <div class="row">
            <div class="col-lg-12">
                <table id="user_table" class="table">
                </table>
            </div>
        </div>
    </div>
</div>
</#macro>
<#macro overrideScript>
<script>

    /**
     *  修改状态
     * @param id
     */
    function modifyPer(id, stutas) {
         if (stutas == null&&id==null) {
             var dataArray=$('#user_table').bootstrapTable('getAllSelections');
             if (dataArray.length<1){
                 layer.msg("请先选中要修改的用户！",{time:1000});
                 return null;
             }

         }
            //询问框
            layer.confirm('你确定修改此用户的状态吗？', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                var data=[{'id': id, 'status': stutas}];

                // 单个修改
                if (id!=null){
                    $.post("/back/admin/update/userstatus", {"users":JSON.stringify(data)}, function (result) {
                        layer.msg(result.result, {icon: 1});
                        $table1.bootstrapTable('selectPage', 1);
                    });
                }else{
                    // 批量修改
                    var dataArray=$('#user_table').bootstrapTable('getAllSelections');
                    for (let obj of dataArray) {
                        delete obj["select"];
                    }
                     var users= JSON.stringify( dataArray);
                    $.post("/back/admin/update/userstatus", {"users":users}, function (result) {
                        layer.msg(result.result, {icon: 1});
                        $table1.bootstrapTable('selectPage', 1);
                    },"json");
                }

            }, function () {

            });


    }

    /**
     *  删除该用户
     * @param id
     */
    function deleteBlog(id) {
        if (id==null){
            layer.msg("请先选中要删除的用户！",{time:1000});
            return false;
        }
        layer.confirm('你确定删除此用户吗？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            // 删除用户
            // 批量删除
            var dataArray=$('#user_table').bootstrapTable('getAllSelections');
            var idArray=new Array();
            for (var i=0;i<dataArray.length;i++) {
                var json =eval(dataArray[i]);
                idArray[i]= json.id;
            }
            $.post("/back/admin/delete/user", {"ids":idArray.join(",")}, function (result) {
                layer.msg(result.result, {icon: 1});
                $table1.bootstrapTable('refresh');
            });

        }, function () {

        });
    }

</script>
<script>
    $(function () {

        $(".side-nav").children("li").eq(3).addClass("active");

        // BootStrap Table 列属性
        var columns = [
            {
                field : "select",
                checkbox: true,
                width: 25,
                align: 'center',
                valign: 'middle'
            },
            {
                field: 'id',
                align: 'center',
                title: 'ID'
                //visible:false
            }, {
                field: 'account',
                align: 'center',
                title: '用户名'
            }, {
                field: 'name',
                align: 'center',
                title: '昵称'
            }, {
                field: 'lastLoginTime',
                align: 'center',
                title: '登陆时间',
                formatter:function (value, row, index) {
                    return new Date(row.lastLoginTime).format("yyyy-MM-dd hh:mm:ss");
                }
            }
            , {
                field: 'status',
                align: 'center',
                title: '状态',
                formatter: function (value, row, index) {
                    //通过formatter可以自定义列显示的内容
                    //value：当前field的值，即id
                    //row：当前行的数据
                    if (row.status === 1) {
                        return "<span class='badge'  style='padding:5px 10px;background-color: green'>" + "正常" + "</span>";
                    } else {
                        return "<span class='badge'  style='padding:5px 10px;background-color: red'>" + "冻结" + "</span>";
                    }
                }
            }, {
                title: '操作',
                align: 'center',
                formatter: function (value, row, index) {
                    //通过formatter可以自定义列显示的内容
                    //value：当前field的值，即id
                    //row：当前行的数据
                    return [
                        '<button type="button" class="btn btn-outline-primary" style="margin: 10px;" onclick="modifyPer(' + row.id + ',' + row.status + ')">' +
                        '<i class="fa fa-edit" style="margin-right: 5px"></i>修改' +
                        '</button>',
                        '<button type="button" class="btn btn-outline-danger" onclick="deleteBlog(' + row.id + ')">' +
                        '<i class="fa fa-trash" style="margin-right: 5px"></i>删除' +
                        '</button>'
                    ].join('');
                }
            }];

        //根据窗口调整表格高度
        $(window).resize(function() {
            // $('#user_table').bootstrapTable('resetView', {
            //     height: tableHeight()
            // })
        });
        //tableHeight函数
        function tableHeight(){
            //可以根据自己页面情况进行调整
            return $(window).height() -250;
        }

        // table 初始化
        $table1 = $('#user_table').bootstrapTable({
            url: '/back/admin/data/userList',
            queryParams: function (params) {
                return {
                    offset: params.offset,
                    limit: params.limit,
                    account: $('#queryAccount').val(),
                    name: $('#queryTitle').val(),
                    status:$('#queryStatus').val()
                }
            },
            columns: columns,
            pagination: true,
            toolbar: '#toolbar',
            toolbarAlign: 'left',//工具栏对齐方式
            buttonsAlign: 'left',//按钮对齐方式
            pageList: [5, 10, 20, 50],
            sidePagination: 'server',//服务器端分页
            pageSize: 10,
            clickToSelect: true,//是否启用点击选中行
            //showRefresh:true,//刷新按钮
        });
        //刷新方法
        $('#heartBtn').click(function () {
            $table1.bootstrapTable('refresh');
        });

        // 点击查询按钮,设置跳转到第一页
        $('#queryBtn').click(function () {
            $table1.bootstrapTable('selectPage', 1);
            //$table1.bootstrapTable('refresh');
        });



    });
</script>
</#macro>
<@layout head=overrideHead container=overrideContainer script=overrideScript>
</@layout>